/*城市选择*/
import React, { useRef, useState } from "react";
import { Select } from "antd";
import { useFormField } from "../../context/form-context";
import CityDropdown from "./CityDropdown";
import usePlacement from "../../lifecycle/usePlacement";
import { getIeHack, isIE, parseToArray } from "../../utils";

let defaultConfig = {
  //这一批属性来源 tplData.form.data_control （步骤权限）
  // "code": "city",
  // "name": "城市选择",
  // "type": "select_city",
  // "is_show": true,
  // "is_editable": false,
  // "is_required": false,

  //这一批属性来源 tplData.form.form_meta_data （表单设计器）
  // "isUsed": false,
  // "designProps": {
  //   "code": "city",
  //   "name": "城市选择",
  //   "ui": "wfd_selectCity",
  //   "title": "城市选择",
  //   "layout": "control_layout_leftRight",
  //   "defaultValue": "",
  //   "text": "请选择城市选择",
  //   "groupTitle": "",
  //   "byTableGroupTitle": false,
  //   "tipstext": "",
  //   "type": "select_city",
  //   "title_w": 85
  // },
  
  //这一批属性来源 tplData.form.data_define （业务对象）
  // "show_type": "",
  // "show_type_name": "",
  // "props": {
  //   "source_type": "fixd_value",
  //   "default_value": ""
  // },
  // "type_name": "城市选择",
  
  //来源 tplData.form.defaultValueConf
  // "default": null
}

export default function ({ field, cell, rules, onChange, onBlur, displayFormatter, valueFormatter, rowIndex }) {

  const { input, className, isDisplay } = useFormField({
    field,
    rules,
    onChange,
    displayFormatter,
    valueFormatter,
    onBlur,
  });
  const [open, setOpen] = useState(false);
  const elementRef=useRef()

  let placemnet= usePlacement(elementRef)
  //获取需要显示再界面上的值
  function getDataText(value = "[]") {
    if(value===null){
      return null
    }
    value = parseToArray(value);
    let txts = [];
    value.forEach(function (item) {
      let cityName = item.CityCN;
      if (item.CountryEN != "China") {
        cityName = item.CountryCN + "-" + item.CityCN;
      }
      txts.push(cityName);
    });
    return txts.join(",");
  }
  if (isDisplay) {
    //返回实际需要显示的文本
    return input.value === undefined ? null : getDataText(input.value);
  }

  //操作锁
  const lockRef = useRef(null);
  let lockClose = () => {
    clearTimeout(lockRef.current);
    lockRef.current = setTimeout(() => {
      lockRef.current = null;
    }, 100);
  };

  let component = (
    <Select
      open={open}
      onBlur={() => {
        lockClose();
      }}
      
      value={input.value ? getDataText(input.value) : undefined}
      placeholder={cell?.designProps?.text ? cell?.designProps?.text : "请选择"}
      style={{ width: "100%" }}
      className={className}
      placement={placemnet}
      // placement={"bottomRight"}
      onDropdownVisibleChange={(open) => {
        if (lockRef.current) return;
        if (open === false) {
          input.onBlur();
        }
        setOpen(open);
      }}
      dropdownStyle={{minWidth:"432px"}}
      dropdownRender={() => {
        return <CityDropdown field={field} {...input} setOpen={setOpen}></CityDropdown>;
      }}
      {...getIeHack()}
    ></Select>
  );

  return <div ref={elementRef}>{component}</div>
}
